Welcome

Welcome to the Tutorial

The tutorial is designed to teach you quickly how to use the program. Along the way, you will learn the basic steps of creating a project and also discover some of our favorite tips so you can be productive with this authoring tool.

These quick and easy lessons take you step by step through the process of creating a project. In just about an hour, you will create a complete project containing many features.

In the Basic Lessons, you will learn how to open a project, create new topics, arrange topics into folders, view topics in different ways, create bulleted and numbered lists, format text, add tables, preview topics, spell check text, link topics, create bookmarks, link to popup windows, add Related Topics buttons, view and test links, and create a table of contents.

In the Advanced Lessons, you'll learn how to change the status of topics, create and apply styles, build an index, create browse sequences, add images, and generate your project.

Are you ready? Let's get started.


Getting started

The best way to work with the tutorial is to print it and complete the easy lessons in order. Print options depend on your system and system settings.

To print the lessons:

  1. Click the Print button on your toolbar. The Print dialog appears and will include one or more options for printing.

  2. If the option is available, you can select Print the selected heading and all subtopics to print all the information displayed on the right-hand side. (If you have Basic or Advanced lessons open, everything prints.)

  3. Alternatively, if the only option available is Print the selected topic, then do the following: Open the Basic Lessons book and print the first topic in this book. All the Basic Lessons are in one topic so all the Basic Lessons will print at one time. Then, open the Advanced Lessons book and print the first topic. All Advanced Lessons will print.

Tip: You can print both lessons at the same time. Open the Basic Lessons. Right-click inside the topic pane and select Print from the menu. At the Print dialog, select Print all linked documents and click OK. (The Basic lessons topic has a link to the Advanced lessons topic, so both lessons will print.)

To view the tutorial online:

  • The table of contents is an expandable list of lessons. To view the tutorial from the table of contents, click the Contents tab and then click a page to view the corresponding lesson in the right-hand pane.

  • To see a list of index entries, click the Index tab, scroll through the list, and then double-click the keyword. When you double-click a keyword, the corresponding topic appears on the right. (You'll notice a slight delay before the topic content appears because the viewer or browser must open the topic, find the bookmark, and then scroll to the area in the topic where the keyword-bookmark is linked.)

  • To locate every occurrence of a word or phrase in the tutorial, click the Search tab, and then type the word.

Now, on to your first lesson...


Basic lessons

Opening projects

To open a project:

  1. (If the product is already open, skip to step 3.) Start the program by double-clicking the program icon on your desktop.

  2. When the product dialog box opens, click Cancel.

  3. From the File menu, select Open.

  4. Navigate to C:\Program Files\RoboHELP Office\RoboHTML\Tutorial\LaJolla.

  5. Click once on LaJolla.mpj and click Open. The project named La Jolla is displayed.

Note: If the Tip Wizard is open, click Close tip window. Whenever you start the program, a handy tip is displayed in the Tip Wizard. This is a great way to learn more about using the program.

  6. Click the Maximize button [image] in the upper-right corner of the window so you can see all of the features that you can use.

  7. Take a moment to view the screen and learn the names of the various features:

  • On the left side of the screen, you see the Project Manager.

  • On the right side, you see the Topic List.

  • Above these components are the toolbars, as well as the menu bar.

  8. In the Topic List, double click the topic About La Jolla. The topic opens in the WYSIWYG Editor on the right side of the screen. The WYSIWYG Editor replaces the Topic List. (You can easily choose which component you want to use on the right side by clicking on the tabs in the lower right corner.)

  9. Remove the text "First topic in project 'La Jolla.'" (To remove text, place the cursor to the left of the text, press the left mouse button, and drag it across the text so it's highlighted. Then, click Delete [image].)

  10. Type the following text below the topic title:

La Jolla is a community in San Diego famous for its magnificent scenery, steep cliffs, research centers, and hillside homes. O ver 32,000 people reside in La Jolla. It is also the home of eHelp Cor poration, located at 7777 Fay Avenue.

This gem by the sea attracts many visitors with its beautiful beaches, playful sea lions, cliffside picnic grounds, and fabulous restaurants.

Click an attraction below for more information.

Saving projects

It's a good idea to save your work as you author. There are two ways to save. Use whichever method is most convenient for you.

To save a project:

  • Click Save All [image].

OR

  • Press and hold CTRL and S (CTRL+S) at the same time. This is the shortcut key for saving your work.

Creating new topics

Topics are the building blocks of projects. In HTML-based Help each topic is its own HTML file. Let's create one now. The Create Topic Wizard takes you through the simple steps.

To create a new topic:

  1. Click New Topic [image] on the Project toolbar.

Tip: When you hold your mouse pointer over a toolbar button, a tool tip is displayed that identifies the button. For example, when you hold the pointer over [image], the tool tip displays the text "New Topic."

  2. In Topic Title, enter the following text:

La Jolla Cove

Notice that there are other tabs at this dialog. These tabs enable you to change the topic's appearance, add keywords and ALink names, and more. (You'll learn how to work with these tabs later in the tutorial.)

  3. Click OK. The topic "La Jolla Cove" is added to the list of HTML files. We'll edit this topic later.

You just learned how to create a new topic. We've prepared a few Help files for you to use as well.

Creating folders

In the Project Manager on the left side, click once on the plus sign next to the folder HTML Files (Topics). To further organize the topics in your project, we'll create some custom folders for them. The HTML Files (Topics) folder should look something like this:

To create a new folder:

  1. Right-click on the HTML Files (Topics) folder and select New Folder. The new folder is displayed with a temporary name.

  2. Type "Natural" over the existing text, and then press ENTER. The new folder is renamed "Natural."

  3. Repeat the steps to create another folder named "Man-Made." (Be sure to select HTML Files (Topics) before creating the new folder.)

You just created custom folders (subfolders) that reside in the HTML Files (Topics) folder. Now you can move topics into the new folders.

Moving topics into folders

To move topics into folders:

  1. Click the Topics tab (lower-right side of window). All the files in your project are listed.

  2. Press and hold CTRL while you click the following files:

    La_Jolla Cove

    La_Jolla_Shores

    Torrey_Pines_State_Park

    Underwater_Park

    Windandsea Beach

Tip: Pressing CTRL while clicking the mouse lets you select multiple topics that are not adjacent to each other in the list.

  3. Select the topics you want to move, and use drag and drop to place them in the "Natural" folder you just created in Project Manager. The folder is highlighted (selected) as you move topics into it. Be sure to point ON the folder when you drop the files.

  4. Repeat steps 2 and 3 to move these files into the "Man-Made" folder:

    About_La_Jolla

    Art_Museum

    Man-Made_La_Jolla

    Torrey_Pines_Glider_Port

    Torrey_Pines_Golf

Opening folders

After you move files into folders, a plus [image] box appears to the left of the folder. This indicates that the folder contains files. When you click [image], the folder opens (expands) to show its contents.

When folders are open, the plus box becomes a minus [image] box. This indicates that the folder is open (you can see its contents). When you click the minus box [image] the folder collapses, and its contents close from view.

To open a folder:

  • Click the plus [image] box next to the folder Natural to view its contents. (Man-Made is already open because it's the last folder used.)

The folders should look something like this:

Viewing topics by file name or topic title

By default, Project Manager displays your files by their topic titles. You can also view them by their file names.

To view by file name:

  • From the View menu, select By File Name. The files are displayed using their file names:

Let's switch them back to topic titles.

To view by topic title:

  • From the View menu, select By Topic Title. The files are displayed by their titles:

Opening topics in the WYSIWYG Editor

Most Help authors spend a great deal of development time in the WYSIWYG Editor. This is where you create the content of your topics while the HTML code is generated behind the scenes. What you see in the WYSIWYG Editor is a good representation of how the topic will look in the viewer.

To open a topic in the WYSIWYG Editor:

  1. From the Topics tab, select the topic you want open in WYSIWYG (for this exercise, select La Jolla Cove).

  2. Click once on the WYSIWYG tab in the lower-right corner. The topic La Jolla Cove opens in the WYSIWYG Editor.

Next, we'll find out how easy it is to create numbered lists in the WYSIWYG Editor.

Creating numbered lists

As a Help author, you'll most likely create a lot of numbered lists in your topics. You'll probably want to format them so they combine list items that are not numbered. For example, you'll want to include explanatory information on separate lines as well as screen shots of the application you are describing (as you see in this tutorial).

Let's practice creating and formatting a numbered list now, with the topic you just opened in the WYSIWYG Editor, "La Jolla Cove."

To create a numbered list from the Formatting toolbar:

  1. Remove the text on the second line: "Type topic text here."

  2. Type the following text (press ENTER at the end of each line to create a new paragraph):

Swimming
Snorkeling
Scuba diving
Kayaking
Sunbathing
Whale watching

  3. Select the text starting with "Swimming" and ending with "Whale watching."

  4. On the toolbar, click Numbered List [image]. The lines are numbered from 1 to 6.

What if you want some explanatory text after step 1?

  1. Click at the end of step 1, "Swimming," and press SHIFT + ENTER. This creates a new blank line without a number and aligns it under step 1.

  2. On this line, type the following text:

The annual La Jolla Cove Roughwater Swim attracts thousands of swimmers and spectators.

  3. Click at the end of step 6, "Whale watching," and press ENTER. The new line is automatically numbered as step 7.

What if you want to interrupt the numbered list here?

  1. On the toolbar, just click Numbered List [image] and the list ends.

  2. Type the following text on the new line where you just ended the list:

Historical Note: The Cove has been a hangout for beachgoers since the late 1890s when the first flight of wooden stairs led visitors down the cliffs to the sand below.

  3. Press ENTER to insert a new line and type the following:

Cave exploring
(Be sure to leave the insertion point on this line.)

  4. On the toolbar, click Numbered List [image]. A new numbered list begins on this line.

What if you want this line to be a continuation of the numbered list above it?

  1. Make sure the insertion point remains on this new line. From the Format menu, select Bullets and Numbering. The Bullets and Numbering dialog opens.

  2. In Restart numbering at, enter 7. (Notice that you can also change the numbering styles from this dialog.)

  3. Click OK. The line becomes a continuation of the numbered list above it.

  4. Save your work.

Creating bulleted lists

You'll probably want to create bulleted lists in your topics. There is a quick and easy way to format lines of text as bulleted lists.

To create a bulleted list:

  1. Open the topic "La Jolla Shores" in the WYSIWYG Editor. (Double-click on the topic in the Project Manager.)

  2. Select all the lines of text under the heading "La Jolla Shores" — starting with "Walking" and ending with "Kite flying."

  3. From the Formatting toolbar, click Bulleted List [image]. The lines of text are formatted as bulleted list items. By default, the bullet is a solid circle. You can select different bullet styles. (The lines of text should still be selected. If they are not, select them.) Your project should look something like this:

  4. From the Format menu, select Bullets and Numbering. From the Bulleted tab, you can select solid circles, solid squares, hollow circles, or a custom bullet character.

  5. Click the solid squares sample (upper right), and then click OK. The list is formatted to use solid squares for the bullet characters. Next, let's indent a few of the lines in this list.

  6. Select the lines starting with "Swimming" and ending with "Kite flying."

  7. Click the increase indent arrow [image] on the formatting toolbar. The selected list items are indented.

Formatting text with the toolbar

The Formatting toolbar includes buttons for the most commonly used features. Take a moment to examine this toolbar. On the far left you have style and font options from the drop-down lists. In the center, you have buttons for changing the attributes of characters such as text colors, bold, and italics. Next are paragraph formatting buttons for alignment and numbered and bulleted lists. The buttons on the right enable you to view paragraph marks and increase or indent text.

Let's use some of these buttons to format the text in your topic.

To format text:

  1. Open the topic "La Jolla Cove" in the WYSIWYG Editor.

  2. Highlight the words "Historical Note."

  3. Click Bold [image]. The text is displayed in bold.

  4. Highlight the rest of the text in the paragraph (beginning with "The Cove...").

  5. Click the down-arrow on the right side of the Font Color button [image].

  6. Select Purple. The text is displayed in purple.

  7. At the beginning of the topic, click inside the heading "La Jolla Cove." (You don't have to select all text in a paragraph to format the paragraph attributes.)

  8. Click Align Center [image] . The text is centered between the left and right margins.

  9. Save your work.

Tip: Using other format buttons on the Formatting toolbar, you can create bulleted and numbered lists (as you learned in this lesson), change font types sizes, and attach a different style sheet to the topic.

Formatting with inline styles

As you work, you'll find yourself using styles and style sheets. Let's learn how to format text using inline styles, which are the most basic type of styles (you'll learn about cascading style sheets later in the tutorial).

To create and apply an inline style:

  1. Open the topic "Torrey Pines State Park" in the WYSIWYG Editor.

  2. Select the text "Torrey Pines State Park."

  3. From the Format menu, select Font.

  4. From the Font dialog, do the following:

  • In Font, select Arial or Sans Serif.

  • In Font style, click Bold.

  • In Size, select 18 pt.

  • In Font color, select Yellow.

The dialog should look something like this:

  5. Click OK to apply the inline style to the selected text.

We just changed the font for the topic's heading. Next, we'll change the background color of the paragraph.

  1. Click inside the line you just formatted: "Torrey Pines State Park."

  2. From the Format menu, select Borders and Shading.

  3. From the Borders and Shading dialog, click the Shading tab.

  4. In Color, select Green.

  5. Click OK to apply the inline style to the paragraph.

A final lesson with inline styles:

Finally, we'll add a border to the paragraph.

  1. Click inside the paragraph starting with the text "The Torrey Pine was one of...".

  2. From the Format menu, select Borders and Shading.

  3. On the Borders tab, do the following:

  • In Setting, select Box.

  • In Style, select Solid.

  • In Color, select Green.

  • In Width, select 2 px.

The Borders tab should look something like this:

  4. Click Padding, and select 2 px. for all four options (Top, Bottom, Left, Right).

  5. Click OK.

  6. Click OK to apply the inline style to the paragraph.

Your topic should look something like this:

(If you notice any typos in this page, don't be alarmed. You'll be checking for spelling errors later in this lesson.)

Adding tables

With tables, you can organize information in an efficient and logical way. When you are first learning about tables, it's a good idea to turn on paragraph markers. As you move through the cells, you'll see the paragraph marker. (You also see the paragraph marker at the end of every paragraph in your topic.)

To turn on paragraph markers:

  • On the Formatting toolbar, click Show/Hide [image].

Let's learn how to create the table next.

To add a table:

  1. Click on the blank line above the paragraph you just formatted (the paragraph beginning "The Torrey Pine was one of....").

  2. On the Tables and Borders toolbar, click Insert Table [image]. A grid is displayed.

  3. Point and drag to highlight 3 rows and 2 columns (3 x 2 table). The insert table grid should look something like this:

  4. Click and release the mouse button to insert the table.

    Notice how a paragraph marker is displayed in each of the cells, and the insertion point is already in the first cell so that you can quickly add text.

  5. Type "Plants" in the upper-left cell.

  6. Press TAB and type "Animals" in the upper-right cell.

  7. Press TAB and type "Torrey Pines" below the cell "Plants."

  8. Press the down-arrow key on your keyboard and type "Wildflowers" below "Torrey Pines."

  9. Click inside the cell below "Animals" and type "Whales."

  10. Press the down-arrow key and type "Dolphins" below "Whales."

  11. Click Show/Hide [image] to turn off paragraph markers.

You've just learned how to create a table and add text to cells by using the TAB and arrow keys. You can also click inside cells and work with text.

Previewing topics

You can quickly see the results of what you are authoring before compiling by using the Preview Topic feature. There are two methods for previewing topics. You can view topics in a separate window that is always on top of the program window (the window can be moved and resized). Another option is to view topics in a pane below the Topic List (Topics tab) on the right side of the program window (the pane can be resized).

To preview the topic in a separate window:

  1. From the Tools menu, select Options.

  2. From the Options dialog, click the General tab.

  3. Select Preview in separate window. (This is the default setting, but in case you or someone else who uses your system cleared it earlier, we need to make sure it's selected for this lesson.)

  4. Click OK to save the option.

  5. Click View [image].

  6. The topic "Torrey Pines State Park" is displayed in the preview window. It should look something like this:

  7. When you finish viewing the topic, close the preview window. To close it, click Close [image] in the top right corner. (Whenever you preview topics throughout this tutorial, click this button to close the preview window.)

To preview the topic in a pane below the Topic List:

  1. From the Tools menu, select Options.

  2. Click the General tab.

  3. Clear Preview in separate window.

  4. Click OK to save the change.

  5. Click once on the Topics tab (right side of program window). The Topic List opens.

When you use the Topic List, you can view a list of topics (simple list of topic titles) or details about topics (file name, topic title, yes/no indicators for TOC and index entries, status, and date last modified).

To view a simple list of topic titles:

  1. From the View menu, select List View.

  2. Click once on Torrey Pines State Park.

  3. Click View [image]. The topic is displayed in the Topic Preview pane below the Topic List. It should look something like this:

To adjust the length of the pane so you can see more of the topic:

  1. Place the mouse pointer on top of the horizontal line that separates the Topic List from the Topic Preview pane.

    The mouse pointer turns into a line with arrows on each end [image].

  2. Press the left mouse button and drag up or down to adjust the length of the pane.

To change the setting back to previewing in a separate window:

  1. From the Tools menu, select Options.

  2. Click the General tab.

  3. Select Preview in separate window.

  4. Click OK.

Notice how the preview pane below the Topic List closes from view. Next time you preview the topic, it will be displayed in a separate window on top of the program window.

Checking spelling

To check spelling:

Let's see how easy it is to use the program's spell checker. (We've made a few typo's in this topic so you can correct them. You also get to add new words to the dictionary.)

  1. Click the WYSIWYG tab.

  2. From the Tools menu, select Spell Check Current Topic or press F7.

    The first word the spell checker finds is "Torrey." This is a unique name, and you need to add it to the dictionary.

  3. From the Spell Check dialog, click Add.

    The spell checker continues and finds "rtee."

  4. Scroll through the list of suggestions, select "tree," and click Change.

    The spell checker continues and highlights the word "palces."

  5. Scroll through the list of suggestions, select "places," and click Change.

    The spell checker continues and highlights the word "Jolla."

  6. Click Add Word to add this word to the dictionary.

  7. At "The spelling check is complete" prompt, click OK.

  8. Save your work.

Linking topics

Now that you have several topics in your project, it's time to link them. The program inserts a URL (Uniform Resource Locator) that indicates the address (location) of the file to jump to.

To insert a hyperlink:

  1. Open the topic "About La Jolla" in the WYSIWYG Editor.

  2. Select "La Jolla" in the first paragraph.

  3. Click Insert Hyperlink [image] on the Objects toolbar. The Hyperlink dialog opens. Take a moment to study this dialog. At the lower-left, you'll see the list of topics that you can link to (these are topics in your project).

  4. In the Natural folder, select the topic La Jolla Cove.

  • The content of this topic is displayed in Preview.

  • In the text box next to Link to, the topic file name is displayed.

    After you make the settings, the Hyperlink dialog should look something like this:

  7. Click OK. The link is added to your topic. It appears in blue (the default color for links), and it's underlined when you view it in the WYSIWYG Editor.

Dragging and dropping to insert links

There are other ways to insert hyperlinks. One of the easiest ways is to drag a topic from the Project Manager into the WYSIWYG Editor.

Dragging and dropping to insert links:

  1. In the WYSIWYG Editor click at the end of line that reads "Click on an attraction below for more information" and press ENTER to insert a blank new line.

  2. Type the following text:

Visiting La Jolla Shores

  3. Select the text you just typed so it's highlighted.

  4. From the "Natural" folder on the left, drag La Jolla Shores and drop it on the highlighted text in the WYSIWYG Editor.

    As you drag to the selected text, the text turns red and the pointer displays a plus box, indicating where the link will be placed. It should look like this:

When you release the mouse button, the text becomes a link to the topic "La Jolla Shores."

  5. Click once at the end of the line "Visiting La Jolla Shores" and press ENTER to add another blank line in the topic.

  6. Type the following text:

Surfing at

  7. Press the spacebar to insert a blank space after the text you just typed.

  8. From the Natural folder on the left, drag Windandsea Beach onto the WYSIWYG Editor and drop it after the text you just entered. A link to the topic "Windandsea Beach" is created.

  9. Save your work.

After you finish, the links should look something like this:

Creating bookmarks

By default, hyperlinks jump to the beginning of a destination topic. You can add a special control known as a bookmark that allows you to link to anywhere within a topic. This is similar to a mid-topic jump in WinHelp.

To add a bookmark:

  1. Open the topic "Man-Made La Jolla" in the WYSIWYG Editor.

  2. Click to the left of "La Jolla Museum of Contemporary Art."

  3. Click Insert Bookmark [image] on the Project toolbar. The Bookmark dialog opens.

  4. Type the following name for the bookmark:

    Museum

  5. Click OK.

    The bookmark icon is displayed to the left of the text:

  6. Use the same procedure to create bookmarks for the following headings:

    Torrey Pines Glider Port — Glider Port

    Torrey Pines Golf Course — Golf

  7. Save your work.

Linking bookmarks

You've just created three bookmarks — Museum, Glider Port, and Golf. Now it's time to link to them.

To create a link to a bookmark:

  1. Click the Project tab. A plus box is displayed to the left of "Man-Made La Jolla."

  2. Click the plus box. The bookmarks you just created are displayed. The Project Manager should look something like this:

  3. Open the topic "Torrey Pines Glider Port" in the WYSIWYG Editor.

  4. Select the text "Torrey Pines Glider Port."

  5. From the Project Manager, drag and drop the bookmark "Glider_Port" onto the selected text.

    You just created a link from the topic "La Jolla Glider Port" to the bookmark in the topic "Man-Made La Jolla."

  6. Open the topic "Torrey Pines Golf Course" in the WYSIWYG Editor.

  7. Select the text "Torrey Pines Golf Course" and create a link to the bookmark "golf."

  8. Open the topic "Art Museum" in the WYSIWYG Editor.

  9. Select the text "La Jolla Museum of Contemporary Art" and create a link to the bookmark "museum."

  10. Save your work.

To test the bookmark links:

  1. From the Project Manager, right-click on the topic "Torrey Pines Glider Port" and select View.

  2. Click the link "Torrey Pines Glider Port." Notice how the topic "Man-Made La Jolla" opens, and the text where the bookmark is located is at the top of the viewing pane.

  3. Close the preview window.

Creating popup links

Popup links enable users to view other topics while the current topic remains open.

To add a popup link:

  1. Open the topic "Windandsea Beach" in the WYSIWYG Editor.

  2. At the beginning of the second paragraph, select the word "riptides."

  3. Click Insert Hyperlink [image].

  4. From the list of destination topics, select Riptides.

  5. Select Display as Popup.

  6. Click OK. You just created a popup link.

To view your popup link:

  1. Select View [image].

  2. Click the riptides link.

    Notice how the topic appears in a separate window on top of the one you're currently viewing. Depending on the size of your preview window, the popup window might display scroll bars so you can read all the content.

  3. When you finish viewing the topic, click inside the popup window to close it.

    Notice how the topic "Windandsea Beach" remains open.

  4. Close the preview window.

Linking to Web sites

One of the greatest features of Help is the ability to create links to Web sites, such as your company's Internet site. You can create links in the Help window, within the content of a topic, from a keyword in the index, or from a book or page in the table of contents. Let's create a remote text link in this lesson.

To create a link to a Web site:

  1. Open the topic "About La Jolla" in the WYSIWYG Editor.

  2. Select "eHelp Corporation" from the first paragraph.

  3. Click Insert Hyperlink [image].

    The Link To drop-down list displays all the different places you can link to. Click and view the available destinations. The Link To drop-down looks like this:

Tip: For this lesson, we are linking to a Web site. To create a link to a Web site, you enter the address of the Web site — also known as the URL.

  4. Select Web Address from Link to.

  5. In the text box to the right of Link to, enter the following Web address after "http://":

    www.ehelp.com

  6. Click OK. The selected text is targeted as a link to the eHelp Corporation Web site.

  7. Save your work.

To test the link:

  1. Right-click inside the WYSIWYG Editor and select Preview Topic.

  2. Click the link for eHelp Corporation. The preview window is updated to display eHelp Corporation's home page (if you have an Internet connection). From here, you can click links to navigate throughout the Web site.

  3. Navigate to links at this site, just as you do in Internet Explorer.

  4. When you finish, close the preview window.

  5. If you want, you can create a link to one of your favorite Web sites and preview it.

  6. Save your work.

Identifying URL icons

How do you know that your project includes links to Web sites?

To view URLs from the Topic List:

  • Click the Topics tab to open the Topic List. Whenever you add a URL to a topic, it is displayed on the Topic List with a globe icon:

To view URLs from the Project Manager:

  • Click the Project tab to open the Project Manager. Click the plus sign next to the URLs folder. Whenever you add a URL to a topic, it is listed in this folder:

Tip: If you want to know what topics include the Web address link, right-click the URL and select Show Topic Links. The URL and the topics that link to it are displayed in Link View on the right.

Creating text-only popups

Text-only popups are useful if you need to provide users with a little more information, but don't want them to leave the topic they are viewing.

  1. Open the About La Jolla topic in WYSIWYG.

  2. In the second paragraph, select "sea lions."

  3. From the Insert menu, select Text-only popup. A popup box is displayed. The insertion point is located inside this box so you can type text.

  4. Type in the following:

    Large, eared seals without underfur that usually live in colonies along the coastline of the Pacific Ocean.

  5. Press ENTER. The text-only popup is added to the topic.

  6. Right-click inside the WYSIWYG Editor and select Preview Topic.

  7. Click "sea lions." The text-only popup opens.

  8. Click inside the popup window to close it.

  9. When you finish viewing the topic, close the preview window.

You can update text-only popups and change the text, font, background color, and margins. Let's make a few changes.

  1. From the topic "About La Jolla," right-click on the popup link "sea lions" and select Text Popup Properties.

    The Text Popup Properties dialog opens.

    From here, you can make changes to the text-only popup. You can edit the text and change the appearance of the popup. Let's change the appearance.

  2. From the Font list, scroll and select Verdana.

  3. From Background Color, select Silver. The Text Popup Properties dialog should look something like this:

  4. Click OK.

  5. Save your work. Open the topic in the preview window and select the sea lions link. The popup window displays the text using the font and color you selected.

Adding related topics buttons

Related topics help users navigate among related concepts in topics. A related topics link is usually a button that users click to select the topic they want to open. The Related Topics Wizard takes you through the easy steps to create one.

To add a related topics button:

  1. Open the topic "Torrey Pines Glider Port" in the WYSIWYG Editor.

  2. Click once after the last word of text and press ENTER to insert a new blank line.

  3. From the Insert menu, select HTML Help and click Related Topics. The Related Topics Wizard dialog opens.

    At the first screen (Button Options), specify how you want the link to look in the topic. You can use a standard text button, an image button, or a hidden control. We'll use the default link, which is a text button that displays "Related Topics" as the button label.

  4. Click Next. The Related Topic Selection dialog opens. This is where you select the topics you want to use with the control. When users click the button, these topics are displayed, and they select the one to view.

    The left side of the dialog displays a list of topics in your project that you can use with the control.

  5. From Topics in Project, scroll down and select Torrey Pines Golf Course.

  6. Click Add. The topic is added to the Related Topics list on the right. You've just added your first topic for the related topics button.

  7. Repeat these steps and add Torrey Pines State Park. The screen should look something like this when you finish:

  8. Click Next. The Display Options dialog opens. From here, select how to display the list of topics when users click the button and where the topics should be displayed when opened. They can be displayed in the right-hand viewing pane or in a custom window or frame that you create.

  9. Select Popup Menu. When users click the button, the related topics are displayed in a popup menu. Users can select a topic to view from this menu.

    We'll leave the other options as "(not specified)" since we want the topics to open in the right-hand viewing pane in the viewer.

  10. Click Next. At this last dialog (Font Options), select the font and font attributes you want to use for the text label. The default label used for a standard text button is "Related Topics."

  11. Select Verdana and 9 pt as the Size.

  12. Click Finish. A gray button titled "Related Topics" is inserted into the topic. It should look something like this:

To view and test your related topics button:

You can view and test related topics buttons from the preview window. Let's view and test the Related Topics button you created in the topic "Torrey Pines Glider Port."

  1. On the Project toolbar, click View [image].

  2. Click the Related topics button.

    Notice the list of topics are displayed in the popup menu:

  3. Select "Torrey Pines Golf Course." The topic opens in the preview window.

    You can easily return to the previous topic and select other related topic links.

  4. Right-click inside the topic and select Back. You return to the topic "Torrey Pines Glider Port." (Keep this navigation tip in mind whenever you preview topics.)

  5. Click the Related Topics button again and select the topic "Torrey Pines State Park."

  6. Close the preview window.

Viewing hyperlinks

Now that you've created some links, you can find out how they connect to each other in Link View. This feature shows all links to and from each topic. It's similar to a map and is a handy way to see the link structure in your project.

To view hyperlinks:

  • From the HTML Files (Topics) folder, right-click About La Jolla and select Show Topic Links. Link View displays the topic "About La Jolla" and all of its links:

To view the Topic Reference report:

The Topic References report organizes and displays information about your topics and their links.

  1. From the Tools menu, select Reports – Topic References. Each topic is shown, followed by a list of topics that link to it.

Tip: Scroll through the list and view the links in your topics. Notice that you can print these reports, save them as text files, mail the data to other people, or copy information to the Windows Clipboard.

  2. Click Close.

Creating a table of contents

The table of contents (TOC) is the "front door" to your project. It's one of the first things users see. By default, the TOC is displayed on the left side of the viewer, paired with an Index tab (and a Search tab if you configure your project to include full-text search).

The book and page metaphor is used to represent categories and topics in your TOC. Book icons represent categories of topics, and page icons represent the individual units of information (topics). When users click a book, it opens and displays the pages (topics). When users click a page, the topic it references opens in the right-hand viewing pane.

Adding books

It's easy to create a TOC by adding books and pages in the TOC Composer.

To add books to the TOC:

  1. Click the TOC tab on the left side of the program window. You'll see a tab without the label if the width of your left-hand pane is too narrow.

  2. Click New Book [image] on the Project toolbar. The Book Properties dialog displays.

    In Help, you can create books without links as well as books that link to a single topic. For this tutorial, we'll be creating books without links (the default).

  3. In Title, enter the following text:

    Natural La Jolla

  5. Click OK. The book is added to the TOC.

  6. Add another book titled, "Man-Made La Jolla."

You've added books to the TOC, and now you need to add pages to go with them. A page is an icon that represents an actual topic. When clicked, the page displays the topic in the viewer.

Adding pages

To add pages to the TOC:

  1. From the TOC Composer, click the book Natural La Jolla.

  2. On the Project toolbar, click New Page [image].

    You can add a title for the page, select the destination, and scroll through the list of topics to select the one to use with the page. Your destinations can include topics, Web sites, email addresses, and other remote locations.

  3. Click the down arrow to the right of the Destination list and view your choices.

  4. For this lesson, we'll be linking to a topic. Select File or URL.

  5. From the Topic list, select La Jolla Cove. The Page Properties dialog should look something like this:

    Notice how the title uses the name of the topic. You can type text in Title and edit what is automatically added when you select topics. For this lesson, we'll use the text that is already in the box.

  6. Click OK. The page is added to the TOC, for the topic "La Jolla Cove."

There is another quick and easy way to add pages to your TOC. This next lesson shows you how.

Dragging and dropping pages into the TOC

To drag and drop pages into the TOC:

  1. Click the Topics tab on the right side of the program window.

  2. From the Topics List, click Windandsea Beach, and then drag and drop the topic below the book titled "Natural La Jolla." As you drag, you'll see a yellow arrow that indicates where the item will be placed when you drop it.

  3. Use this same method to add pages for Underwater Park and Torrey Pines State Park.

  4. Next, we'll add pages to the Man-Made La Jolla book. To save time, we can add all of them at once. Press and hold CTRL as you click the following topics in Topic View:

    Art Museum

    Torrey Pines Glider Port

    Torrey Pines Golf Course

    About La Jolla

  5. Drag and drop these topics below the book titled "Man Made La Jolla." Your project should look something like this:

Note: The icons used to display your topics in the Topic List change from a white background to a blue background so you know that they are included in the TOC.

Now you've got something to display in the TOC — books and pages. Why not rearrange their order?

Moving books and pages

To move books and pages in the TOC:

  1. From the TOC Composer, click La Jolla Cove and drag and drop it below "Underwater Park." As you drag, you'll see a yellow arrow indicating where the item will be placed when you drop it.

  2. Drag Windandsea Beach below La Jolla Cove.

  3. Click About La Jolla and drag and drop it above the book titled "Natural La Jolla."

When you finish, the TOC should look like this:

If your table of contents does not look like this, move the books and pages into the correct order by dragging and dropping them.

Renaming pages

You can rename pages right in the TOC Composer.

To rename a page:

  1. Right-click on the page Underwater Park and select Rename.

  2. Type in La Jolla Underwater Park.

  3. Press ENTER.

  4. Save your work.

Viewing the Table of Contents report

The table of contents report provides you with details about your TOC.

  1. From the Tools menu, select Reports - Table of Contents. Each book and page is shown in the hierarchy you designed.

  2. Click Close.

Congratulations!

You've just learned the basics. These lessons provide an overview of many powerful features and show how easy it is to work with the program.

Continue with the Advanced lessons to learn more.


Advanced lessons

This section picks up where the basic lessons ended. If you haven't completed the basic lessons, finish them before you start these advanced lessons. If you closed the tutorial project, open it in the program before you start the advanced lessons.

To open the La Jolla project:

  1. Click the File menu. The lower-part of this menu displays the last several projects that were open.

  2. If LaJolla.mpj is displayed, select it.

  3. Otherwise, from the File menu, select Open.

  4. At the Open dialog, browse to the drive/folder where the project is located and double-click to open it.

Changing topic status

An easy way to manage topics is by altering their properties. For example, you can prioritize topics, assign a status to them, track development hours, and log To Do items. By default, the program assigns some of this information to each topic when it is created. You can alter topic properties individually or in groups.

For this lesson, we'll change the status of multiple topics simultaneously.

To change topic status:

  1. Click the Topics tab to open the Topic List.

  2. Select the following topics (press and hold CTRL while you click each one; do not select the bookmarks or the URL).

  • Torrey Pines State Park

  • La Jolla Shores

  • La Jolla Cove

  3. Click Properties [image] on the Project toolbar.

  4. From the Topic Properties dialog, click the Status tab.

  5. From the To Do list, select First Draft, Added to TOC, and Links. (Click the boxes to add check marks.) The Topic Properties dialog should look like this:

  6. Click the down-arrow on the same line as Status and select Ready for Review.

  7. Click OK to close the dialog.

Creating style sheets

There are three kinds of styles:

  • Style sheets: Also known as Cascading Style Sheets, they are styles created for specific style sheets. The style definitions are saved with the style sheet file (.CSS), which is separate from the topics that use it. When you change a style in a style sheet, all topics that are linked to that style sheet are updated to reflect the style change.

  • Embedded: Styles that are created for an individual HTML file are referred to as embedded styles. The style definitions are saved in the topic (.HTM file) that uses it. (No other topics are able to use the embedded styles contained in that topic.) When you change an embedded style, only the topic it is contained in changes to reflect the new styles.

  • Inline: A block of text within a single HTML file is formatted directly in the WYSIWYG Editor using the Format Font and Paragraph dialogs and from the Formatting toolbar. There are no style names associated with the formatting. The formatting is saved with the block of text that uses it.

Style sheets enable you to define font style and size, line spacing, paragraph indents, and other formatting features. Similar to templates used by Microsoft Word and other programs, a style sheet is a template that controls the formatting of topics. Style sheets enable you to maintain consistency among your topics, and you can share them with other authors so your projects maintain a consistent look and follow your design standards.

Style definitions are stored in a special file (style sheet) that is separate from the HTML topics that use it. A single style sheet (.CSS) can be associated with any number of topics. If desired, you can even have multiple style sheets as part of a project, each attached to different topics.

When you create a new project, the first topic is set up to use the default style sheet called "DEFAULT.CSS." All new topics you create in the project use the same style sheet until you attach a new one to an existing topic. The style sheet can be one that you create from scratch, or it can be one that you import into the project.

Tip: You can attach style sheets to topics and also apply embedded and inline formatting. The "cascading" effect of style sheets enables some styles to have priority over others. For example, if you combine the three types of styles in a single topic, inline styles have top priority, then embedded styles, and finally styles defined in style sheets.

In this lesson, you'll learn how to create a new style sheet, define styles for it, and attach the style sheet to your topics.

To create a style sheet:

  1. Click the Project tab.

  2. If necessary, open the HTML Files (Topics) folder.

  3. Double-click the topic "About La Jolla" so it opens in the WYSIWYG Editor.

  4. Click Properties [image].

  5. From the Topic Properties dialog, click the Appearance tab.

  6. Currently, the style sheet DEFAULT.CSS is attached to the topic. (By default, all topics are linked to DEFAULT.CSS until you attach or create new ones.) The Topic Properties dialog should look like this:

  7. Click New. The Save As dialog opens. From the Save As dialog, you can assign a name for the new style sheet.

  8. In the File name box, type LaJolla.CSS.

  9. Click Save.

The Styles dialog opens next. This is where you set up the styles for the new style sheet you just created, "LaJolla.CSS."

Now it's time to define styles for the style sheet file. Let's define the Normal style first:

  1. Select Normal and click Modify.

Note: To view a list of all available styles on this dialog, make sure that Hide inherited styles is not selected.

  2. On the Modify Styles dialog, click the Format button and select Font. The Font dialog opens.

  • For Font, select Times New Roman or Serif.

  • For Font style, select Regular.

  • For Size, select 12 pt.

  • For Font Color, select Black. The Font dialog should look like this:

  3. Click OK to close the Font dialog. You just customized the Normal style for your style sheet.

  4. Click OK to close the Modify Styles dialog.

Notice that the Styles dialog updates the Description box to reference the new formatting.

Now we'll set up Heading 1:

  1. On the Styles dialog, select Heading 1 and click Modify.

  2. Click the Format button and select Font. The Font dialog opens.

  • For Font, select Arial or Sans Serif.

  • For Style, select Bold.

  • For Size, select 14 pt.

  • For Color, select Purple.

  3. Click OK.

  4. Click OK again.

We'll make Heading 2 slightly different:

  1. On the Styles dialog, select Heading 2 and click Modify.

  2. Click the Format button and select Font.

  • For Font, select Arial or Sans Serif.

  • For Style, select Bold.

  • For Size, select 12 pt.

  • For Color, select Teal.

  3. Click OK.

Now we'll create a completely new style:

  1. On the Styles dialog, select Normal.

  2. Click New. The New Style dialog opens.

Tip: Remember that typing when text is selected replaces the selection. The Normal style is not removed when you create this new style.

  3. Under Name, type Special. The New Style dialog should look like this:

  4. Click the Format button and select Font. The Font dialog opens.

  • For Font, select Arial or Sans Serif.

  • For Style, select Bold.

  • For Size, select 10 pt.

  • For Color, select White.

  5. Click OK.

  6. On the New Style dialog, click the Format button and select Borders and Shading.

  7. On the Borders and Shading dialog, click the Shading tab.

  8. From Color, select Teal. (This adds a shade to the background fill.)

  9. Click OK. The New Style dialog should look like this:

  10. Click OK to save the new style.

    On the Styles dialog, notice that the style you just created (Special) now appears on the Styles list.

  11. To save your changes and return to the topic, click Close.

Style types

The New Style dialog has an option called Style type that allows you to select the style category you want to work with. You can select one of the following:

  • Paragraph: Applies to entire paragraph such as Normal, Heading 1, Heading 2, etc.

  • Character: Applies to selected block of text such as Subscript, Plain Text, Code, etc.

In the last section you worked with paragraph styles. Now, let's change the background color so that it applies to the entire topic.

To change the background color of the topic:

  1. From the Format menu, click Styles.

  2. From the Styles list, select Background + Text.

  3. Click Modify.

  4. From the Modify Style dialog, click the Format button and select Borders and Shading.

  5. Click the Shading tab.

  6. In Color, select White.

  7. Click OK to return to the Modify Style dialog. Preview shows the selected color applied to the topic.

  8. Click OK to close the Modify Styles dialog and return to the Styles dialog.

  9. To return to the topic, click Close.

  10. Click OK. The new style sheet, "LaJolla.CSS" is defined and attached to the topic that is open in the WYSIWYG Editor ("About La Jolla").

  11. Save your work.

When you created the style sheet, you were editing the properties for the topic "About La Jolla." This topic is linked to the new style sheet. As you can see, the topic's appearance has changed. The styles have been updated to reflect the formatting you set up in the style sheet.

Attaching style sheets to topics

For your topics to use the style sheet you created you must attach it. There are several ways to attach style sheets to topics. Let's learn the simple methods now.

To attach a style sheet to a topic from the formatting toolbar:

The formatting toolbar includes a Style Sheet list that displays the names of all the style sheets that are available in your project. You can attach a style sheet to a topic from this list.

  1. Click the Project tab.

  2. Open the Natural La Jolla folder and double-click La Jolla Cove to open the topic in the WYSIWYG Editor.

  3. Since this topic is not linked to a style sheet, it uses default HTML formatting.

  4. Click the Style Sheet list [image] on the formatting toolbar and select LaJolla.CSS. The style sheet is attached to the topic and the text is updated to take on the formatting in the style sheet.

  5. Save your work.

To attach a style sheet to several topics at once:

You can select multiple topics from the Topic List and attach a style sheet to all of them at the same time.

  1. Click the Topics tab.

Tip: If any topics are currently selected, click below the list of topics to clear highlighting.

  2. Press and hold CTRL while you click Underwater Park and Windandsea Beach. Both topics are now selected.

  3. On the Project toolbar, click Properties [image].

  4. Click the Appearance tab.

  5. Under Style Sheet, select LaJolla.CSS and click OK. The style sheet is attached to both topics.

  6. Save your work.

Applying styles

After you've attached style sheets to topics, you can apply the styles to your text.

To apply styles:

  1. Open the topic "Underwater Park" in the WYSIWYG Editor.

  2. Click in the first line of text "Underwater Park."

  3. From the Styles list (left side of Formatting toolbar), select Heading 1. (You need to scroll up the list to locate this style.)

    The first line is updated to display the attributes for the Heading 1 style.

  4. Click at the end of the first paragraph (". . . but dive in!"), and press ENTER to insert a new blank line.

  5. Type the following:

    About the Underwater Park

  6. From the Styles list, select Heading 2.

  7. Click inside the paragraph below this heading ("The California Department . . .").

  8. From the Style list, select Special.

    Your topic should look something like this:

Creating an index

An index is an essential component of a Help system. You create an index by adding keywords to topics. There are several ways to do this.

To add keywords to topics using the right-click menu:

  1. Click the Index tab on the left side to open the Index Designer.

  2. Take a moment to review this component:

  • At the top-left, the drop-down provides selections for Index and ALinks — the default is Index. (You can also use the Index Designer feature to create ALinks for your topics. See the online Help system for more information.)

  • In the keyword text box, you can type keywords and click Add to add them to the index.

  • Below this is the Keyword pane. As you add keywords, they are listed here.

  • In the Topics for pane, the topics that use the keyword selected in the Keyword pane are listed.

Dragging and dropping keywords

A really easy way to create the index is to drag and drop topics into the Index Designer. Let's start by viewing details about topics in the Topic List.

  1. Click the Topics tab on the right side of the program window.

  2. From the View menu, select Details View.

As you add topics to the index, this view updates the Index column for each topic to "Yes," indicating that the topic has keywords. The page icon on the left side of the file name changes from white to blue (another visual clue that the topic is indexed).

Now let's add a keyword into the index.

To drag and drop keywords into the index:

  1. Enter the following word into the Keyword text box (on the top pane of the Index Designer):

    Swimming

  2. Click Add to add it to the list of keywords. The keyword is added to the list, although it appears in bold because it is not yet associated with a topic.

  3. Click the Topics tab.

  4. From the Topic List, drag and drop the topic La Jolla Shores into the lower-pane of the Index Designer, below Topics For: Swimming.

Tip: You might need to adjust the pane lengths to view the bottom part of the Index Designer. To do this, place the pointer over the edge of the pane that you want to adjust. The pointer turns into a line with arrows on each end. Press the left mouse button and drag up, down, left, or right. The pane is resized after you release the mouse button.

Now the keyword "Swimming" is added to the topic "La Jolla Shores." Notice how the Topic List displays the page icon in blue to indicate that the topic is indexed. The Index column also displays "Yes" for the "La Jolla Shores" topic:

Adding keywords to topic properties

You can also add keywords to topic properties. You can do this when you create the topic (after you assign a title) or you can do this to existing topics in your project.

To add keywords using topic properties:

  1. In the Topic List, right-click Art Museum and select Properties.

  2. On the Topic Properties dialog, click the Index tab.

  3. Type the following keyword in the Keywords text box:

    Paintings

  4. Click Add to add the keyword to the topic.

  5. Add these other keywords:

    Drawings

    Photographs

The Topic Properties dialog should look like this:

  6. Click OK to save the new keywords.

You can sort the keywords alphabetically and numerically in the Index Designer:

  1. Right-click the first keyword at the top of the keyword pane and select Sort - Current Level and Below from the menu.

  2. Now the keywords are sorted alphabetically.

Creating cross-references

As with a "see also" reference in a printed index, you can cross-reference keywords in an online index. The cross-reference is a keyword that leads to another keyword. When users select the cross-reference from the Index tab, they go to the alternate keyword.

When you create the cross-reference, you select two keywords rather than a keyword and a topic. You can only cross-reference index file keywords.

To cross-reference an index keyword:

  1. Click the Index tab.

  2. In the Keyword text box, enter Art and click Add. This keyword appears in bold to indicate that it is not cross-referenced to an alternate keyword.

  3. Right-click the keyword and select Properties.

  4. On the Keyword Properties dialog, select Cross-reference.

    Notice how the field to the right of the Cross-reference option becomes active so you can click the drop-down list.

  5. Click the drop-down and select Paintings. This is the keyword users go to when they select the cross-referenced keyword from the index. The Keyword Properties dialog should look like this:

  6. Click OK.

The lower-pane in the Index Designer indicates the name of the alternate keyword used with the cross-reference keyword:

  7. Save your work.

Viewing the Index report

The Index report provides you with details about your index.

  1. From the Tools menu, select Reports - Index. The report shows all of the keywords you added to the index.

    You can view the report in a variety of ways.

  2. Click Options.

Note: You can view index file keywords as well as topic keywords. In this tutorial, you are creating index file keywords. You can also use topic keywords with your index. These keywords are saved in individual topics, which comes in handy when you share files and import them into various projects.

  3. Select Keywords and Topics.

  4. Click OK.

    The Index report is updated to show an alphabetized list of keywords. Under each keyword is a list of topics that reference it. It should look like this:

  5. Click Close.

Creating browse sequences

Browse sequences are ordered sets of topics that users read by clicking special navigation buttons ("previous" and "next"). Because they guide readers through a series of topics, browse sequences are often used for introductory materials and tutorials.

To create browse sequences:

  1. From the Tools menu, select Browse Sequence Editor.

  2. Click New and type Natural La Jolla.

  3. Click New again and type Man-Made La Jolla.

  4. Press ENTER.

Assigning topics to browse sequences

Now that you have created browse sequences, you can add topics to them.

To add topics to browse sequences:

  1. Click Natural La Jolla.

  2. From the Available Topics list, select La Jolla Cove and click [image]. The topic is added to the Natural La Jolla folder in the Browse Sequence list.

  3. Add the following topics the same way:

  • La Jolla Shores

  • Windandsea Beach

  • Underwater Park

  4. Click Man-Made La Jolla.

  5. From the Available Topics list, select Torrey Pines Glider Port and click [image]. The topic is added to the Man-Made Jolla folder in the Browse Sequence list.

  6. Add the following topics the same way:

  • Torrey Pines Golf Course

  • Art Museum

    After you add the browse sequences, the dialog should look something like this:

  7. Click OK to save the browse sequences.

    A message is displayed, indicating that browse sequences have been enabled in your Help system.

  8. Click OK.

Viewing browse sequences

You can view your browse sequences in Link View.

  1. Click the Link View tab.

  2. Click the Project tab. Select the topic La Jolla Shores and drag and drop it into Link View. Your project should look something like this:

The previous and next buttons on the top and bottom of the central topic indicate that it is used with a browse sequence. Click the previous and next buttons to move through the browse sequence.

Testing browse sequences

To test browse sequences, run your project.

  1. Click Save [image].

  2. Click Quick Generate [image] on the Project toolbar. (You'll learn more details about selecting, generating, and running primary targets later in these lessons.)

  3. Click Run [image] on the Project toolbar.

    The browse sequence list, navigation buttons and bar are displayed on the right side above the content pane:

  3. Click the buttons or icons to move through the browse sequence.

  4. Close the Preview window.

  5. To close the compiler pane, click Output View on the View menu.

Adding images to topics

You can use .GIF and .JPEG image file formats. You can add images to your topics in no time. Just follow these easy steps.

To add an image to a topic:

  1. From the HTML Files (Topics) folder, double-click La Jolla Shores to open the topic in the WYSIWYG Editor.

  2. At the end of the first line of text in the topic "La Jolla Shores," press ENTER to add a new line.

  3. From the Insert menu, select Image. The Image dialog includes an Images in project folders list. It displays the names of images in your project.

  4. From the drop-down menu in the Images in project folders list, select Top Level Folder. There are several images (.GIF files) in your project folder.

  5. Click shores.gif.

    A thumbnail of the image is displayed in Preview, and the file name appears in Image name (at the top of the dialog):

  5. Take a moment to study other features in this dialog.

  • Click [image] to display the Select Image file dialog. At this dialog you can search for and add new files to your folder. (We won't do this in the tutorial since you already have several image files to use.)

  • You can select how you want text to wrap around an image, or you can select None if you don't want to use text wrapping.

  • You can adjust the image's size (height and width), set the margins (the amount of space between the image and its surrounding text), and add a border.

  • In Screen tip, you can type text to display when users hover the mouse over an image.

  6. Click OK to insert the image into the topic.

  7. Save your work.

Dragging and dropping images

Once you've added an image to your project, it's quick and easy to reuse it in other topics and in other locations. Besides adding it from the Image dialog, you can also use drag and drop. The next lesson shows you how.

To add an image to a different topic:

  1. Open the topic, "Underwater Park."

  2. Click at the end of the heading "Underwater Park" and press ENTER to add a new line.

  3. In the Project Manager, open the Images folder, drag cliffs.gif into the WYSIWYG Editor, and drop it onto the blank line you just added to the topic.

    The image is added to your topic on the new line:

  4. Save your work.

Creating image maps

You can make your Help system even more useful by including a multiple hotspot image. These are easily created by using eHelp Corporation's HotSpot Studio to generate the image map. (Hotspot Studio is copied to your system when you install RoboHELP.)

To create an image map:

  1. Right-click the image you just added and select Insert Image Map from the menu.

  2. Click Rectangle. You mouse pointer becomes crossed lines [image] that you'll use to create the image map.

Now you'll set up the targets for the clickable regions:

  1. Click on the upper-right corner and drag to the bottom-middle of the image to draw a rectangle around the ocean portion of the picture.

  2. When you release the mouse, the Image Map dialog opens. This is where you can link topics to clickable areas.

  3. Under Select destination (file or URL), select La Jolla Shores.

  4. Click OK. The image map is targeted to display the topic "La Jolla Shores" when clicked.

  5. Right-click on the image again and select Insert Image Map.

  6. Select Rectangle.

  7. This time, click on the upper-left corner and drag to the bottom-middle of the image to create a rectangle around the cliffs in the picture.

  8. Use the drop-down menu under Select destination (file or URL) to select Top Level Folder.

  9. Select Riptides and click OK. The image map is targeted to display the topic "Riptides" when clicked.

  10. Click Display as Popup. (You are creating a popup link for this part of the image map.) The Hyperlink dialog should look like this:

  11. Click OK.

  12. To test the image maps, click View [image].

  13. Try out your new image map by clicking on the hotspot areas you created (i.e., the cliff on the left and the ocean on the right). If you click on the cliffs on the left-side of the image, the riptides topic should popup and look like this:

Generating your project

The last step is to generate your project.

To generate a project:

  1. From the File menu, select Generate - HTML Help.

  2. When the files finish generating, you can view them. Click Run and navigate through the project.

  3. Click Close [image] to exit the project.

Good job!

You've just completed the tutorial. These lessons gave you an overview of many of the program's powerful features and demonstrated many of our favorite tips to enhance your productivity.

You're now ready to explore on your own.

Before you move on, you may want to read these final topics in the tutorial:

What's Next?


What's Next?

The product's online Help system is packed with information to help you learn how to effectively use the program. Here are some places to check out:

  • Online Help: Provides helpful hints about efficiently using the product and the online Help system.

  • Key features: This topic in the online Help system describes the features available in the program and takes you to specific topics that include lots of helpful information.

  • Help Basics: These topics in the online Help system describe Help, how Help is used, Help system formats, and managing Help projects. All topics are worthwhile reading.

  • Glossary: The online glossary contains an A to Z listing of common Help terms and their definitions. Refer to this whenever you want a better understanding of concepts and terminology.

  • Work environment: This topic in the online Help system familiarizes you with navigating the work environment. It explains and shows different components of the program, including the Index Designer, Link View, Project Manager, TOC Composer, Toolbars, and the WYSIWYG Editor.